import React, { RefObject, useRef, useState } from 'react'
import style from './style.less';
import { Button, Dialog, Form, ImageUploadItem, ImageUploader, Input, NoticeBar, Picker, Popup, Space, Tabs, TextArea, Toast } from 'antd-mobile';
import { CalculatorOutline, LocationFill } from 'antd-mobile-icons';
import PriceArea from '@/components/jiagequjian';
import Pick from '@/components/area-picker';
import List from '@/pages/supply/hall/.info/.list'
import SAC from '@/images/supply/Image.png'

type Props = {
  onClick?:()=>void;
}

interface Shipment {
  areaCode: string
  shipmentPlace: string[]
}

export default (props:Props) => {
  const {onClick} = props
  const [form] = Form.useForm();
  const maxCount = 1
  const maxCount1 = 5
  const [fileList, setFileList] = useState<ImageUploadItem[]>([])
  const [qualification, setQualification] = useState<ImageUploadItem[]>([])

  const [visible, setVisible] = React.useState<boolean>(false);
  const [visibleq, setVisibleq] = useState(false)
  const [visibles, setVisibles] = useState(false)
  const [value, setValue] = useState<Shipment>({} as Shipment)
  const [valuep, setValuep] = useState<Shipment>({} as Shipment)
  const [valueo, setValueo] = useState([])
  const priceArea = useRef<any>()


  const submit = (values: any) => {
    console.log(values)
  }

  const mockUpload = (file: File) => {

    return {
      url: URL.createObjectURL(file),
    }
  }

  return (
    <div className={style.page}>
      <div className={style.content}>
        <Form
          form={form}
          layout='horizontal'
          onFinish={submit}
          requiredMarkStyle='none'
          footer={(
            <div className={style['btn-warp']}>
              <Button block color='success' size='large' type='submit'
                onClick={() => {
                  form.submit()
                }
                }
              >
                提交
              </Button>
            </div>)}
        >
          <div className={style.block}>
            <div className={style.title}>基本信息</div>
            <Form.Item
              label='商品分类'
              name='code'
              onClick={() => {
                setVisible(true);
              }}
              // rules={[{ required: true, message: '商品分类不能为空!' }]}
              extra={
                <span className={style.fenlei}>
                  <CalculatorOutline className={style.icon} />
                  选择
                </span>
              }
              getValueFromEvent={(e) => {
                console.log(e, '父组件获取值');
                form.setFieldValue('code', e)
                return e
              }}
            >
              <Popup
                bodyStyle={{ height: '100vh' }}
                visible={visible}
                onMaskClick={() => {
                  setVisible(false);
                }}
              >
                {<div className={style.modal}>
                  <List showSearch={true}
                    onConfirm={v => {
                      form.setFieldValue('code', v)
                      console.log(v);

                      setValueo(v)

                    }}
                    onChange={() => { }}
                  />
                  <div className={style.btn}>
                    <Button block color='success' size='large' onClick={() => { setVisible(false) }}>
                      确定
                    </Button>
                  </div>
                </div>}
              </Popup>

              {form.getFieldValue('code')}
            </Form.Item>
            <NoticeBar
              content='开票名称：白菜（如未匹配，请修改商品名称）'
              wrap
              color='alert'
              icon={<LocationFill />}
            />
            <Form.Item
              label='商品名称'
              name='commodityName'
              rules={[{ required: true, message: '姓名不能为空!' }]}
            >
              <Input
                placeholder='请输入'
                style={{ '--text-align': 'right' }}

                clearable
              />
            </Form.Item>
            <Form.Item
              label='商品产地'
              name='originPlace'
              rules={[{ required: true, message: '商品产地不能为空!' }]}
              onClick={() => {
                setVisibles(true)
              }}
              getValueFromEvent={(e) => {
                console.log(e, '父组件获取值');
                form.setFieldValue('originPlace', e)
                return e
              }}

            >
              <Pick
                visible={visibles}
                onClose={() => {
                  setVisibles(false)
                }}
                onConfirm={v => {
                  form.setFieldValue('originPlace', v?.originPlace)
                  console.log(v);
                  setValue(v)
                }}
              />
              {form.getFieldValue('originPlace')}
            </Form.Item>
            <Form.Item
              label='商品发货地'
              name='shipmentPlace'
              rules={[{ required: true, message: '商品发货地姓名不能为空!' }]}
              onClick={() => {
                setVisibleq(true)
              }}
              getValueFromEvent={(e) => {
                console.log(e, '父组件获取值');
                form.setFieldValue('shipmentPlace', e)
                return e
              }}

            >
              <Pick

                visible={visibleq}
                onClose={() => {
                  setVisibleq(false)
                }}
                onConfirm={v => {

                  setValuep(v)
                  form.setFieldValue('shipmentPlace', v?.shipmentPlace)
                }}
              />
              {form.getFieldValue('shipmentPlace')}
            </Form.Item>
            <Form.Item
              label='商品单价'
              name='shangpingjia'
              rules={[{ required: true, message: '商品单价不能为空!' }]}

            >
              <PriceArea value={[]} />
            </Form.Item>
            <Form.Item
              label='商品数量'
              name='quantity'
              rules={[{ required: true, message: '商品数量不能为空!' }]}
              extra='斤'
            >
              <Input
                placeholder='请输入'
                style={{ '--text-align': 'right' }}
                clearable

              />
            </Form.Item>
          </div>
        </Form>
        <div className={style.price}>
          <div className={style.title}>
            商品图片
            <span>(最多上传1张)</span>
          </div>
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
            maxCount={1}
            showUpload={fileList.length < maxCount}
            onCountExceed={exceed => {
              Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`)
            }}
            onDelete={() => {
              return Dialog.confirm({
                content: '是否确认删除',
              })
            }}
          >
            <img src={SAC} alt="图片上传" className={style.img} />
          </ImageUploader>
        </div>
        <div className={style.price}>
          <div className={style.title}>
            商品资质
            <span>(非必填,最多上传5张)</span>
          </div>
          <ImageUploader
            value={qualification}
            onChange={setQualification}
            upload={mockUpload}
            multiple
            maxCount={5}
            showUpload={qualification.length < maxCount1}
            onCountExceed={exceed => {
              Toast.show(`最多选择 ${maxCount1} 张图片，你多选了 ${exceed} 张`)
            }}
            onDelete={() => {
              return Dialog.confirm({
                content: '是否确认删除',
              })
            }}
          >
            <img src={SAC} alt="图片上传" className={style.img} />
          </ImageUploader>
        </div>
        <div className={style.block}>
          <div className={style.title}>商品描述</div>
          <TextArea
            placeholder='请输入'
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        </div>
      </div>
    </div>
  )
}

